<template lang="pug">
div(class="topic-selection-wrap")
    div(class="topic-selection-header")
      el-row
        el-col(:span="12")
          i(class="el-icon-s-fold") 选择话题
        el-col(:span="12", style="text-align:right")
          el-button(type="text",@click="back") 返回
    el-table(:data="topics",empty-text="加载中...",
            :show-header="false",
            :cell-style="cellStyle",
            @row-click="rowSelected" )
        el-table-column
            template(slot-scope="scope") 
                span # 
                span {{scope.row.topicName}}
                span #
        el-table-column(align="right")
            template(slot-scope="scope") 
                span {{scope.row.partitionName}}


</template>

<script>
import Vue from "vue";
import axios from "@/plugins/axios";

export default {
  name: "topic-selection",
  data() {
    return {
      topics: [],
      cellStyle() {
        return { "border-color": "#fafafa" };
      }
    };
  },
  methods: {
    getTopics() {
      var vm = this;
      axios({ url: "forum/selection/topic", method: "post" })
        .then(topics => (vm.topics = topics))
        .catch(() => {});
    },
    rowSelected(row) {
      this.$emit("selected", row);
    },
    back() {
      this.$emit("back");
    }
  },
  created() {
    this.getTopics();
  }
};
</script>

<style lang="less" scoped>
@import "../../common/common.less";

.topic-selection-wrap {
  position: absolute;
  width: 100%;
  top: 0;
  background: @page_background;
  height: 100%;
  // margin: 0 -8px 0 -8px;
  // padding: 0 5px;
  display: flex;
  flex-direction: column;
}
.topic-selection-header {
  @height: 40px;
  height: @height;
  line-height: @height;
  padding: 0 10px;
}
.topic-selection-wrap table {
  border-color: #fafafa;
  flex: auto;
  overflow-y: scroll;
}
</style>
